import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from '../components/Login.vue'
// 导入主页组件
import Home from '../components/Home.vue'
// 导入欢迎页组件
import Welcome from '../components/Welcome.vue'
// 导入用户列表组件
import Users from '../components/user/Users.vue'
// 导入权限管理组件
import Rights from '../components/power/Right.vue'
// 导入角色列表组件
import Roles from '../components/power/Roles.vue'
// 导入商品分类组件
import Cate from '../components/goods/Cate.vue'
// 导入分类参数组件
import Params from '../components/goods/Params.vue'
// 导入商品列表组件
import List from '../components/goods/List.vue'
// 导入添加商品组件
import Add from '../components/goods/Add.vue'
// 导入编辑商品的组件
import Edit from '../components/goods/Edit.vue'
// 导入订单组件
import Order from '../components/order/Order.vue'
// 导入报表组件
import Report from '../components/report/Report.vue'

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
// 看上去就是还是在调用原来的方法，只不过用catch处理掉了异常
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

// router实例对象
const router = new VueRouter({
  routes: [
    // 新增登录的路由规则
    {
      path: '/login',
      component: Login
    },
    // 新增根路径的路由
    {
      path: '/',
      redirect: '/login'
    },
    // 新增home组件的路由,欢迎页作为home的子路由，并且访问home，就重定向到welcome
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/welcome',
          component: Welcome
        },
        {
          path: '/users',
          component: Users
        },
        {
          path: '/rights',
          component: Rights
        },
        {
          path: '/roles',
          component: Roles
        },
        {
          path: '/categories',
          component: Cate
        },
        {
          path: '/params',
          component: Params
        },
        {
          path: '/goods',
          component: List
        },
        {
          path: '/goods/add',
          component: Add
        },
        {
          path: '/goods/edit',
          component: Edit
        },
        {
          path: '/orders',
          component: Order
        },
        {
          path: '/reports',
          component: Report
        }
      ],
      redirect: '/welcome'
    }
  ]
})

// 为router添加路由访问守卫
// to表示要访问哪个页面
// from表示从哪个页面来
// next是一个放行函数，不加参数表示继续，加了参数表示强制跳转到哪里
router.beforeEach((to, from, next) => {
  // 如果访问的是登录，则放行
  if (to.path === '/login') return next()
  // 如果访问的是其他的，那就检查token，如果有token放行，没有就强制跳转到登录页
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})
export default router
